<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML5 SVG实现可爱的小狗和狐狸动画DEMO1</title>
		<meta name="description" content="Demo 1 for the tutorial on how to animate SVG animals using only CSS (SCSS)" />
		<meta name="keywords" content="animated animals, css, scss, squigglevision, svg, husky, web design" />
		<meta name="author" content="David Khourshid for Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link href='https://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/husky.css" />
		<!--[if IE]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body class="demo-husky">
		<div class="snow"></div>
		<div class="container">
			<header class="codrops-header">
				<h1>Animated Animals</h1>
				<nav class="codrops-demos">
					<a class="current-demo" href="index.html" title="Alex the CSS Husky"><img src="img/link-husky.png" alt="Alex the Husky"/></a>
					<a href="index2.html" title="Felix the CSS/SVG Fox"><img src="img/link-fox.png" alt="Felix the Fox"/></a>
				</nav>
				<p class="info">Please view on a desktop <br/>(Chrome only)</p>
			</header>
			<div class="content content--husky">
				<div class="mountain"></div>
				<div class="mountain"></div>
				<div class="husky">
					<div class="husky-mane">
						<div class="husky-coat"></div>
					</div>
					<div class="husky-body">
						<div class="husky-head">
							<div class="husky-ear"></div>
							<div class="husky-ear"></div>
							<div class="husky-face">
								<div class="husky-eye"></div>
								<div class="husky-eye"></div>
								<div class="husky-nose"></div>
								<div class="husky-mouth">
									<div class="husky-lips"></div>
									<div class="husky-tongue"></div>
								</div>
							</div>
						</div>
						<div class="husky-torso"></div>
					</div>
					<div class="husky-legs">
						<div class="husky-front-legs">
							<div class="husky-leg"></div>
							<div class="husky-leg"></div>
						</div>
						<div class="husky-hind-leg">
						</div>
					</div>
					<div class="husky-tail">
						<div class="husky-tail">
							<div class="husky-tail">
								<div class="husky-tail">
									<div class="husky-tail">
										<div class="husky-tail">
											<div class="husky-tail"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
					<defs>
						<filter id="squiggly-0">
							<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" />
							<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
						</filter>
						<filter id="squiggly-1">
							<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
							<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
						</filter>
						<filter id="squiggly-2">
							<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
							<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
						</filter>
						<filter id="squiggly-3">
							<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
							<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
						</filter>
						<filter id="squiggly-4">
							<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" />
							<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
						</filter>
					</defs>
				</svg>
			</div><!-- /content -->
		</div><!-- /container -->
	</body>
</html>
